<template>
  <div class="loading-Page">
    <div class="loading-Title">
      <i class="el-icon-arrow-left" @click="goback"></i>
    </div>
    <img src="../assets/images/yes.png" alt="" class="headImage"><br>
    <span>weclome</span>

    <div class="register-style">
      <i class="el-icon-phone-outline"></i>
      <input type="text" class="username" placeholder="手机/邮箱"/>
      <hr class="hr-style">
      <i class="el-icon-edit"></i>
      <input type="password" class="password" placeholder="密码（6-20英文和数字）"/>
      <hr class="hr-style">

      <el-button type="text" class="register-directly-span" @click.native="gotoRegisterPage">没有账号，立即注册 <i class="el-icon-arrow-right" ></i></el-button>
      <el-button type="text" class="forgot-password-span">忘记密码?</el-button>
      <el-button type="primary" class="loading-button" @click.native="gotoTabbarPage">登录</el-button>
    </div>
  </div>
</template>

<script>
  //引入样式组件
  import { Toast } from 'mint-ui'

  export default {
    data () {
      return {

      }
    },
    methods:{
      goback(){
        this.$router.go(-1);
      },
      gotoRegisterPage(){
        this.$router.push('/register')
      },
      gotoTabbarPage(){
        this.$message({
          message: '登录成功',
          type: 'success',
          center:true
        });
        this.$router.push('/tabbar')
      }
    }
  }
</script>

<style scoped>
  .el-icon-arrow-left{
    float: left;
    margin: 5px;
  }
  .headImage{
    width: 25%;
    margin-left: -25px;
    margin-top: 60px;
    border: 2.0px solid lightgray;
    border-radius: 20%;
  }
  .register-style{
    position: relative;
    margin-top: 50px;
  }
  .username{
    width: 60%;
    border:none;
    outline: none;
    background-color: #fafafa;
  }
  .hr-style{
    width: 80%;
    margin-top:10px;
    border-color: #d0d0d0;
  }
  .el-icon-phone-outline{
    margin-left: -40px;
    margin-right: 20px;
  }
  .password{
    width: 60%;
    border:none;
    outline: none;
    background-color: #fafafa;
  }
  .el-icon-edit{
    margin-left: -40px;
    margin-right: 20px;
  }
  .register-directly-span{
    font-size: 2px;
    color: lightgray;
    float: left;
    margin-left: 40px;
    margin-top:0px;
  }
  .forgot-password-span{
    font-size: 2px;
    color: lightgray;
    float: right;
    margin-right: 45px;
    margin-top: 0px;
  }
  .loading-button{
    width: 80%;
    margin-top:250px;
    margin-left: -5px;
    background-color: black;
    border-radius: 20px;
    color: #d0d0d0;
    opacity: 0.85;
  }
</style>
